<template>
  <section>
    <div class="container">
      <el-card class="content2" shadow="never">
        <div slot="header" class="clearfix">
          <span style="font-size: 17px;font-weight: bold">数据统计</span>
        </div>
        <div style="display: flex;">
          <div class="countDiv">
            <div class="countNum">
              {{ totalSupervise }}
            </div>
            <div class="countText">
              督办总数
            </div>
          </div>
          <div class="countDiv">
            <div class="countNum">
              {{ mySupervision1.doingCount }}
            </div>
            <div class="countText">
              进行中
            </div>
          </div>
          <div class="countDiv">
            <div class="countNum">
              {{ mySupervision1.confirmCount }}
            </div>
            <div class="countText">
              待确认
            </div>
          </div>
          <div class="countDiv">
            <div class="countNum">
              {{ mySupervision1.completedCount }}
            </div>
            <div class="countText">
              已完成
            </div>
          </div>
        </div>
      </el-card>
      <el-card class="content3" shadow="never">
        <div slot="header" class="clearfix">
          <span style="font-size: 17px;font-weight: bold">
            督办数量（{{ totalSupervision }}）
          </span>
        </div>
        <div>
          <div
            class="category"
            v-for="(item, index) in mySupervision"
            :key="index"
          >
            <div class="category1">
              <span class="category_text">{{ item.name }} </span>
              <span class="category_count">
                {{ item.count }}
              </span>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <div class="slide">
      <el-card style="margin-bottom:10px;padding:7px 0;box-shadow:none">
        <el-form
          :inline="true"
          style="margin: 10px 10px 0"
          label-position="left"
          class="demo-form-inline"
        >
          <el-form-item label="关键字:">
            <el-input
              placeholder="督办名称,分类名称"
              v-model="searchDto.keywords"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="督办分类:">
            <el-select
              clearable
              v-model="searchDto.categoryId"
              class="item_width"
            >
              <el-option
                v-for="item in categoryList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
                <span style="float: left" v-if="item.deep === 1">{{
                  item.name
                }}</span>
                <span :style="deepStyle(item)" v-else>┝{{ item.name }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="责任人:">
            <el-input
              placeholder="名字"
              v-model="searchDto.responsibleUser"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="牵头领导:">
            <el-input
              placeholder="名字"
              v-model="searchDto.leaderUser"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="主要领导:">
            <el-input
              placeholder="名字"
              v-model="searchDto.mainLeader"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="创建时间:">
            <el-date-picker
              v-model="value4"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="getPageData()"
            >
              查询
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-refresh-left" @click="reset">
              重置
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-download"
              @click="dialogFormVisible = true"
            >
              导出
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card shadow="never" class="contents">
        <div slot="header" class="clearfix">
          <span style="font-size: 17px;font-weight: bold">督办事项</span>
        </div>
        <div class="table_content">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="全部" name="-1"></el-tab-pane>
            <el-tab-pane
              v-for="(item, index) in doTypes"
              :key="index"
              :label="item.label"
              :name="item.keyword"
            ></el-tab-pane>
          </el-tabs>
          <page-table
            ref="multipleSelection"
            :page-data="pageData"
            :loading="loading"
            :do-get-page-data="getPageData"
            :row-style="{ height: '52px' }"
          >
            <el-table-column
              show-overflow-tooltip
              prop="title"
              label="督办事项"
              align="left"
              width="200"
            >
              <template slot-scope="scope">
                <a
                  class="task_title_a"
                  @click="openReport(scope.row)"
                  v-if="!scope.row.readStatus"
                >
                  <el-badge is-dot class="dot_item"></el-badge>
                  {{ scope.row.title }}
                </a>
                <a class="task_title_a" @click="openReport(scope.row)" v-else>{{
                  scope.row.title
                }}</a>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="status"
              align="center"
              label="状态"
            >
              <template slot-scope="scope">
                <sz-badge
                  :value="scope.row.status | keyText('SUPERVISION_STATUS')"
                  :type="statusStyle(scope.row)"
                ></sz-badge>
              </template>
            </el-table-column>
            <el-table-column
              width="180"
              label="进度"
              align="center"
              prop="progress"
            >
              <template slot-scope="scope">
                <el-progress :percentage="scope.row.progress"></el-progress>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="createUserName"
              label="创建人"
              align="center"
            >
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="categoryName"
              label="督办分类"
              align="center"
            >
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="responsiblePerson"
              label="责任人"
              align="center"
              width="160"
            >
            </el-table-column>
            <!--            <el-table-column-->
            <!--              prop="linkUserName"-->
            <!--              label="联系人"-->
            <!--              align="center"-->
            <!--            ></el-table-column>-->
            <el-table-column
              show-overflow-tooltip
              prop="planStartTime"
              label="计划开始日期"
              align="center"
              width="120"
            >
              <template slot-scope="scope">
                <span>{{
                  scope.row.planStartTime | formatTime("yyyy-MM-dd")
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="planEndTime"
              label="计划结束日期"
              align="center"
              width="120"
            >
              <template slot-scope="scope">
                <span :style="{ color: thisData(scope.row) ? 'red' : '' }">{{
                  scope.row.planEndTime | formatTime("yyyy-MM-dd")
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="updateTime"
              label="最近更新时间"
              align="center"
              width="160"
            >
            </el-table-column>
          </page-table>
        </div>
      </el-card>
    </div>
    <!-- 导出Excel -->
    <el-dialog title="导出 ( 默认导出全部汇报 )" :visible.sync="dialogFormVisible" width="30%">
      <el-form label-width="80px">
        <el-form-item label="汇报时间:">
          <el-date-picker
            v-model="time2"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="exportExcel" :loading="loading2"
          >导 出</el-button
        >
      </div>
    </el-dialog>
  </section>
</template>
<script>
import Moment from "moment";
export default {
  created() {},
  data() {
    return {
      activeName: "-1",
      doTypes: this.getDictionary("SUPERVISION_STATUS"),
      loading: false,
      pageData: {},
      mySupervision: [], //分类统计信息
      mySupervision1: {}, //状态统计信息
      searchDto: {
        keywords: "",
        categoryId: "",
        startTime: "",
        endTime: "",
        responsibleUser: "",
        leaderUser: "",
        mainLeader: "",
        status: "",
        pageIndex: "",
        pageSize: 10
      },
      loading2: false,
      dialogFormVisible: false,
      value4: [],
      categoryList: [],
      time2: [],
      exp: {}
    };
  },
  watch: {
    "searchDto.keywords"(val) {
      if (!val) {
        this.getPageData();
      }
    },
    "searchDto.categoryId"(val) {
      if (!val) {
        this.getPageData();
      }
    }
  },
  activated() {
    if (this.$route.params.canRefresh) {
      this.initData();
    }
  },
  mounted() {
    this.initData();
  },
  computed: {
    totalSupervise() {
      let num = 0;
      num =
        (this.mySupervision1.completedCount
          ? this.mySupervision1.completedCount
          : 0) +
        (this.mySupervision1.confirmCount
          ? this.mySupervision1.confirmCount
          : 0) +
        (this.mySupervision1.doingCount ? this.mySupervision1.doingCount : 0);

      return num;
    },
    totalSupervision() {
      let num = 0;
      this.mySupervision.map(item => {
        num += item.count ? item.count : 0;
      });
      return num;
    }
  },
  methods: {
    initData() {
      this.activeName = "-1";
      this.searchDto = {
        keywords: "",
        categoryId: "",
        startTime: "",
        endTime: "",
        status: "",
        pageIndex: "",
        pageSize: 10
      };
      this.getMySupervision();
      this.getMySupervision1();
      this.getPageData();
      this.getCategoryTree();
    },
    //计划结束时间是否已到
    thisData(row) {
      return new Date().getTime() >= new Date(row.planEndTime).getTime();
    },
    // 状态颜色设置
    statusStyle(row) {
      let cls = "";
      switch (row.status) {
        case "DOING":
          cls = "danger";
          break;
        case "WAIT_CONFIRM":
          cls = "warning";
          break;
        case "COMPLETED":
          cls = "success";
          break;
      }
      return cls;
    },
    // 汇报
    openReport(row) {
      this.$router.push({
        path: "/main/supervise/superviseReport",
        query: { matterId: row.id }
      });
    },
    //状态点击事件
    handleClick(tab, event) {
      let status;
      switch (tab.paneName) {
        case "-1":
          status = "";
          break;
        default:
          status = tab.paneName;
          break;
      }
      this.searchDto = {
        categoryId: "",
        pageSize: 10,
        keywords: "",
        startTime: "",
        endTime: "",
        status: ""
      };
      this.searchDto.status = status;
      this.getPageData();
    },
    // 获取督办分类
    getCategoryTree() {
      this.API.getCategoryTree({ type: "SUPERVISE", parentId: 0 }).then(res => {
        if (res.data) {
          this.categoryList = [];
          this.setCategoryDeep(res.data, 1);
        }
      });
    },
    setCategoryDeep(data, deep) {
      data.map(item => {
        item.deep = deep;
        let nextDeep = deep + 1;
        this.categoryList.push(item);
        if (item.children) {
          item.children = this.setCategoryDeep(item.children, nextDeep);
        }
      });
      return data;
    },
    //查询督办事项分类统计信息
    getMySupervision() {
      this.API.getSupervisionMatterCategoryStatistic().then(ret => {
        this.mySupervision = ret.data;
        console.log("督办事项分类统计信息", this.mySupervision);
      });
    },
    //查询督办事项状态统计信息
    getMySupervision1() {
      this.API.getSupervisionMatterStatusStatistic().then(ret => {
        this.mySupervision1 = ret.data;
        console.log("督办事项状态统计信息", this.mySupervision1);
      });
    },
    //获取分页数据
    getPageData(val) {
      console.log(this.value4);
      if (this.value4 && this.value4.length > 0) {
        this.searchDto.startTime = Moment(this.value4[0]).format("YYYY-MM-DD");
        this.searchDto.endTime = Moment(this.value4[1]).format("YYYY-MM-DD");
      }
      let tem = Object.assign(this.searchDto, val);
      this.API.getSupervisionMatterPageList(tem).then(ret => {
        this.pageData = ret.data;
        console.log("pageData", this.pageData);
      });
    },
    // 导出Excel
    exportExcel() {
      this.loading2 = true;
      if (this.value4 && this.value4.length > 0) {
        this.searchDto.startTime = Moment(this.value4[0]).format("YYYY-MM-DD");
        this.searchDto.endTime = Moment(this.value4[1]).format("YYYY-MM-DD");
      }
      if (this.time2 && this.time2.length > 0) {
        this.searchDto.startReportTime = Moment(this.time2[0]).format("YYYY-MM-DD");
        this.searchDto.endReportTime = Moment(this.time2[1]).format("YYYY-MM-DD");
      }
      console.log(this.searchDto);
      let fileDownload = require("js-file-download");
      this.ExportApi.getSupervisionMatterExcel(this.searchDto).then(res => {
        const disposition = res.headers["content-disposition"];
        let fileName = this.getFileName(disposition);
        fileDownload(res.data, fileName);
        this.loading2 = false;
      });
    },
    // 重置
    reset(val) {
      this.value4 = []
      this.searchDto = {
        keywords: "",
        categoryId: "",
        startTime: "",
        endTime: "",
        responsibleUser: "",
        leaderUser: "",
        mainLeader: "",
        status: "",
        pageIndex: "",
        pageSize: 10
      }
    },
  }
};
</script>
<style scoped lang="less">
.container {
  height: 770px;
  display: flex;
  flex-flow: column;
  float: left;
  width: 22%;
}

.content2 {
  width: 100%;
  height: 160px;
}

.content3 {
  width: 100%;
  height: 600px;
  margin-top: 10px;
}

.countDiv {
  flex: 1;
  padding-top: 10px;
}

.countText {
  text-align: center;
  margin-top: 10px;
  font-size: 14px;
  color: #999999;
}

.countNum {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}

.category {
  float: left;
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}

.category:nth-child(1) {
  margin-top: 0;
}

.category:nth-child(2) {
  margin-top: 0;
}

.category1 {
  width: 143px;
  height: 40px;
  background: rgba(244, 250, 255, 1);
  border-radius: 6px;
  display: inline-block;
  text-align: center;
  vertical-align: top;
  margin: 2px 10px;
}

.category_text {
  line-height: 40px;
  color: #99b4ca;
  /*float: left;*/
  font-size: 15px;
  margin-right: 5px;
}

.category_count {
  line-height: 40px;
  color: #99b4ca;
  /*float: right;*/
  font-size: 14px;
  margin-left: 5px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.slide {
  // height: 770px;
  display: flex;
  float: right;
  flex-flow: column;
  width: 77.4%;
}

.slide /deep/ .el-card__body {
  padding: 5px 10px;
}

.contents {
  width: 100%;
  // height: 770px;
}
</style>
